﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="description" content="Calculadora de gastos simples" />
		<meta name="keywords" content="HTML,CSS,JavaScript" />
		<meta name="author" content="Rodrigo Longhi" />
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
		
		<title>Payroller - v1.0</title>
		
		<link href="css/dark-hive/jquery-ui-1.8.16.custom.css" media="screen" rel="Stylesheet" />
		<link href="css/style.css" media="screen" rel="Stylesheet" />
		
		<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
		<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
		<script src="js/payroller-1.0.js" type="text/javascript"></script>
		<script src="js/payroller-util-1.0.js" type="text/javascript"></script>
		<script src="js/include.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="tabs">
			<ul>
				<li><a href="#tab-expense">Expenses</a></li>
				<li><a href="#tab-group">Group</a></li>
				<li><a href="#tab-totals">Totals</a></li>
				<li><a href="#tab-config">Configuration</a></li>
			</ul>
			
			<div id="tab-expense">
				<button id="bt-add-expense" type="button" onclick="$E.open();">Add</button>
				<button id="bt-purge-expense" type="button" onclick="$E.log();">Log data</button>
				<table id="tb-expense" class="pr-table"></table>
				
				<div id="dg-expense" title="Add new expense">
					<input type="hidden" id="dg-expense-id" />
					<table>
						<tr>
							<td><label for="dg-expense-name">Name: </label></td>
							<td><input type="text" name="dg-expense-name" id="dg-expense-name" maxlength="20" size="45" /></td>
						</tr>
						<tr>
							<td><label for="dg-expense-value">Value: </label></td>
							<td><input type="text" name="dg-expense-value" id="dg-expense-value" size="10" /></td>
						</tr>
					</table>
				</div>
			</div>
			
			<div id="tab-group">
				<button id="bt-add-person" type="button" onclick="$G.open();">Add</button>
				<button id="bt-purge-group" type="button" onclick="$G.log();">Log data</button>
				<table id="tb-group" class="pr-table"></table>

				<div id="dg-person" title="Add new person">
					<input type="hidden" id="dg-person-id" />
					<table>
						<tr>
							<td><label for="dg-person-name">Name: </label></td>
							<td><input type="text" name="dg-person-name" id="dg-person-name" maxlength="40" size="45" /></td>
						</tr>
					</table>
					<table id="dg-person-tb-split" class="pr-table"></table>
				</div>
			</div>
			
			<div id="tab-totals">
				<button id="bt-draw-total" type="button" onclick="$T.draw();">Draw</button>
				<table id="tb-total" class="pr-table"></table>
			</div>
			
			<div id="tab-config">
				<button id="bt-reset" type="button" onclick="Payroller.reset();">Reset</button>
				<button id="bt-debug" type="button" onclick="Payroller.debug();">Debug</button>
				<div id="logger"></div>
			</div>
		</div>
	</body>
</html>